<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">字典数据</div>
        <a-button type="primary" @click="add">新增</a-button>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postDictDataPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space :size="10" class="space-btn--box">
                <a class="btn" @click="edit(record)">修改</a>
                <a class="btn red-btn" @click="del(record.id)">删除</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>

    <!-- 新增、修改 -->
    <ModalSubclassAdd
      ref="modalSubclassAddRef"
      :data="dataDetail"
      @ok="tableRef.refreshTableData()"
    ></ModalSubclassAdd>
  </PageLayout>
</template>

<script setup>
import ModalSubclassAdd from "./components/modal-subclass-add.vue";
import { postDictDataPage, postDictDataDelete } from "@/api/system";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import { dictStatusOptions } from "@/views/constant";
import { getArrayObj } from "@/utils/common";
// const router = useRouter()
const route = useRoute();
const queryOptions = [
  {
    name: "字典标签",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "dictLabel",
  },
  {
    name: "字典状态",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "itemStatus",
    list: dictStatusOptions,
    attrs: { allowClear: true },
  },
  // {
  //   name: "创建时间",
  //   type: "range-picker",
  //   value: [],
  //   placeholder: ["开始日期", "结束日期"],
  //   filed: "gmtCreate",
  //   attrs: { format: "YYYY-MM-DD HH:mm:ss", showTime: true },
  // },
];
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 60,
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "字典标签",
    dataIndex: "dictLabel",
    key: "dictLabel",
    ellipsis: true,
  },
  { title: "字典值", dataIndex: "dictValue", key: "dictValue", ellipsis: true },
  // {
  //   title: "字典样式",
  //   dataIndex: "itemStyle",
  //   key: "itemStyle",
  //   ellipsis: true,
  // },
  {
    title: "字典状态",
    dataIndex: "status",
    key: "status",
    ellipsis: true,
    customRender: ({ record }) =>
      getArrayObj(dictStatusOptions, record.status)?.label,
  },
  { title: "排序", dataIndex: "itemSort", key: "itemSort", ellipsis: true },
  { title: "备注", dataIndex: "remark", key: "remark", ellipsis: true },
  // {
  //   title: "创建人",
  //   dataIndex: "createdUserName",
  //   key: "createdUserName",
  //   ellipsis: true,
  // },
  // {
  //   title: "创建时间",
  //   dataIndex: "gmtCreate",
  //   key: "gmtCreate",
  //   ellipsis: true,
  // },
  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 130,
  },
];
const queryData = reactive({
  dictType: route.query.dictType,
});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const modalSubclassAddRef = ref(null);
const dataDetail = ref({});
// 新增
const add = () => {
  dataDetail.value = {
    dictName: route.query.dictName,
    dictType: route.query.dictType,
  };
  setTimeout(() => {
    modalSubclassAddRef.value.visible = true;
  }, 0);
};
// 修改
const edit = (record) => {
  dataDetail.value = {
    dictName: route.query.dictName,
    dictType: route.query.dictType,
    ...record,
  };
  console.log(' dataDetail.value', dataDetail.value);
  setTimeout(() => {
    modalSubclassAddRef.value.visible = true;
  }, 0);
};
// 删除
const del = (id) => {
  Modal.confirm({
    icon: h(ExclamationCircleOutlined),
    title: () => "删除确认",
    content: () => "删除后将无法恢复，确认删除？",
    onOk() {
      postDictDataDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.refreshTableData();
      });
    },
  });
};
</script>

<style lang="less" scoped></style>
